<template>
  <div class="payTicket">
    <div class="form">
      <div class="form-box">
        <van-cell-group>
          <van-field v-model="name" label="姓名" placeholder="请输入姓名" />
          <van-field v-model="phone" label="手机号" placeholder="请输入手机号" />
        </van-cell-group>
        <!-- <div class="form-item">
          <div class="form-label">
            <van-icon name="contact" />姓名
          </div>

          <input class="form-input" v-model="name" placeholder="请输入姓名" type="text" />
        </div>-->
        <!-- <van-divider :style="{ margin:'10px 0' }" />
        <div class="form-item">
          <div class="form-label">
            <van-icon name="phone-o" />手机号
          </div>
          <input class="form-input" v-model="phone" placeholder="请输入手机号" type="text" />
        </div>-->
      </div>
    </div>
    <div class="info">
      <div class="infoText">
        <span>*</span>注：手机端仅支持个人报名，如需集体报名，请使用电脑访问官方网址进行报名。
      </div>
      <div class="infoText">官网地址：www.cbda1984.com</div>
    </div>
    <div class="bottomBar">
      <div class="bottomBarTitle">
        报名费用：￥
        <span>{{activity.activityTable.price}}</span>
      </div>
      <!-- <div class="bottomBarBtn" @click="payTicket()">确认支付</div> -->
    </div>
  </div>
</template>
<script>
import wxPay from 'weixin-jsapi'
export default {
  components: {},
  name: 'payTicket',
  data() {
    return {
      activityId: 0,
      activity: {
        activityTable: {},
      },
      name: '',
      phone: '',
      templateList: [],
      templateValueArr: [],
      ticketList: [],
      isFindLog: false,
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    nextPage() {
      this.$router.push({
        path: '/myActivityDetail',
        query: {
          activityId: this.activity.activityTable.activityId,
        },
      })
    },
    payTicket() {
      if (!this.name || !this.phone) {
        this.$toast.fail('请填写姓名和手机号')
        return false
      }

      // 封装参会人信息
      for (let i = 0; i < this.templateList.length; i++) {
        if (
          this.templateList[i].keyName &&
          this.templateList[i].keyName.indexOf('姓名') != -1
        ) {
          this.templateValueArr.push({
            templateId: this.templateList[i].templateId,
            activityId: this.activityId,
            contentText: this.name,
          })
        } else if (
          this.templateList[i].keyName &&
          this.templateList[i].keyName.indexOf('手机') != -1
        ) {
          this.templateValueArr.push({
            templateId: this.templateList[i].templateId,
            activityId: this.activityId,
            contentText: this.phone,
          })
        }
      }

      // 封装票信息
      this.ticketList = []
      this.ticketList.push({
        persionName: this.name,
        persionPhone: this.phone,
        activityId: this.activityId,
      })

      if (this.$sessionStorage.get('openId')) {
        this.JSPay()
      } else {
        this.H5Pay()
      }
    },
    JSPay() {
      this.$request({
        url: '/activity/activitySignUpPc',
        data: {
          activityApplyContentList: this.templateValueArr,
          flag: 3,
          activityTicketList: this.ticketList,
        },
        method: 'post',
      }).then((rsp) => {
        if (rsp.code === 200) {
          if (this.activity.activityTable.price === 0) {
            this.nextPage()
          } else {
            wxPay.config({
              debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,
              appId: rsp.data.paramMap.appId, // 必填，公众号的唯一标识
              timestamp: rsp.data.paramMap.timeStamp, // 必填，生成签名的时间戳
              nonceStr: rsp.data.paramMap.nonceStr, // 必填，生成签名的随机串
              signature: rsp.data.paramMap.paySign, // 必填，签名
              jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
            })
            // console.log(wxPay);
            const _this = this
            wxPay.ready(() => {
              wxPay.checkJsApi({
                jsApiList: ['chooseWXPay'],
                success: function (res) {
                  console.log('seccess')
                  console.log('hskdjskjk', res)
                },
                fail: function (res) {
                  console.log('fail')
                  console.log(res)
                },
              })
              wxPay.chooseWXPay({
                timestamp: rsp.data.paramMap.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: rsp.data.paramMap.nonceStr, // 支付签名随机串，不长于 32 位
                package: rsp.data.paramMap.packageStr, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: rsp.data.paramMap.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: rsp.data.paramMap.paySign, // 支付签名
                success: function (res) {
                  // 支付成功后的回调函数
                  _this.isFindLog = true
                  _this.findPayLog(rsp.data.payId)
                  _this.$toast.success('支付成功!')
                },
                fail: function (res) {
                  _this.$toast.fail('支付失败')
                },
              })
            })
          }
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    H5Pay() {
      this.$request({
        url: '/activity/activitySignUpPc',
        data: {
          activityApplyContentList: this.templateValueArr,
          flag: 2,
          activityTicketList: this.ticketList,
        },
        method: 'post',
      }).then((rsp) => {
        if (rsp.code === 200) {
          if (this.activity.activityTable.price === 0) {
            this.nextPage()
          } else {
            this.findPayLog(rsp.data.payId)
            window.location.href = rsp.data.mwebUrl
          }
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    findPayLog(logId) {
      // console.log(logId)
      if (logId && this.isFindLog) {
        this.$request({
          url: '/activity/payResult',
          data: {
            payId: logId,
          },
          method: 'post',
        }).then((rsp) => {
          if (rsp.code === 200) {
            this.isFindLog = false
            this.nextPage()
          } else {
            setTimeout(() => {
              this.findPayLog(logId)
            }, 2000)
          }
        })
      }
    },
    getActivityOne() {
      this.$request({
        url: '/activity/findActivityById',
        data: { activityId: this.activityId },
        method: 'post',
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.activity = rsp.data
        } else {
          this.$toast.fail(rsp.content)
        }
      })
    },
    findTemplate() {
      this.$request({
        url: '/activity/activitySignUpField',
        data: { activityId: this.activityId },
        method: 'post',
      }).then((rsp) => {
        console.log(rsp)
        if (rsp.code === 200) {
          this.templateList = rsp.data
          //   for (let i = 0; i < this.templateList.length; i++) {
          //     this.templateValueArr.push({
          //       templateId: this.templateList[i].templateId,
          //       activityId: this.activityId,
          //       contentText: ""
          //     });
          //   }
        } else {
          this.$message.error(this.content)
        }
      })
    },
  },
  mounted() {
    this.activityId = this.$route.query.activityId
    this.getActivityOne()
    this.findTemplate()
  },
}
</script>
<style lang="scss">
@import '../assets/css/base';
.payTicket {
  .content {
    .activityName {
      font-size: px2rem(40);
      font-weight: 600;
      color: #fff;
      text-shadow: px2rem(6) 0 px2rem(10) rgba(0, 0, 0, 0.1);
      letter-spacing: px2rem(6);
      line-height: px2rem(60);
      padding: px2rem(40) px2rem(20) 0;
    }
    .form {
      position: absolute;
      width: px2rem(680);
      height: px2rem(280);
      background: #fff;
      top: px2rem(420);
      left: 0;
      right: 0;
      border-radius: px2rem(20);
      margin: auto;
      box-shadow: 0 px2rem(4) px2rem(24) 0 rgba(0, 0, 0, 0.1);
      .form-box {
        margin-top: px2rem(50);
        .form-item {
          display: flex;
          height: px2rem(70);
          line-height: px2rem(70);
          .form-label {
            font-size: px2rem(32);
            margin-left: px2rem(40);
            width: 20%;
          }
          .form-input {
            width: 60%;
            border: 0;
            font-size: px2rem(32);
            margin-left: px2rem(30);
          }
        }
      }
    }
  }
  .info {
    margin-top: px2rem(30);
    margin-bottom: px2rem(30);
    .infoLocation {
      font-size: px2rem(32);
      line-height: px2rem(60);
    }
    .infoText {
      font-size: px2rem(30);
      line-height: px2rem(60);
      color: #969799;
      & > span {
        color: red;
      }
    }
  }
  .bottomBar {
    width: 100%;
    height: px2rem(100);
    .bottomBarTitle {
      font-size: px2rem(28);
      color: #323233cc;
      & > span {
        color: red;
        font-size: px2rem(40);
      }
    }
  }
}
</style>